<template>
	<view class="container">
		<image class="dian" src="/static/login/Ellipse16.png" mode="top"></image>
		<view class="logo"><b>江苏盐城<br>国家级珍禽自然保护区</b></view>
		<view>
			<uni-forms :modelValue="formData">
				<uni-forms-item>
					<text class="text-label">工号</text>
					<view class="text-label">
						<uni-easyinput type="text" v-model="formData.mobileNum" />
					</view>

				</uni-forms-item>
				<uni-forms-item>
					<text class="text-label">密码</text>
					<uni-easyinput type="password" pa v-model="formData.pwd" />
				</uni-forms-item>

				<!-- <uni-forms-item>
					<text class="text-label">验证码</text>
					<uni-row>
						<uni-col :span="12">
							<uni-easyinput class="demo-uni-col" type="text" v-model="formData.graphCode" />
						</uni-col>
						<uni-col :span="12">
							<view class="code-img-wrapper demo-uni-col" type="img" @click="updateImageCode">
								<canvas style="width: 300px;height: 36px;" canvas-id="canvas"></canvas>
							</view>
						</uni-col>
					</uni-row>
				</uni-forms-item> -->
			</uni-forms>
		</view>
<!-- 		<uni-row>
			<uni-col :span="12">
				<view class="text-min ">
					<label class="radio__inner" >
						<radio style="padding-top: 10px ;" class="text-min">
							记住密码
						</radio>
					</label>
					
				</view>
			</uni-col>
			<uni-col :span="12">
				
			</uni-col>
		</uni-row> -->

		<view style="padding: 20px;"></view>
		<button class="btn-blue" @click="onClickLogin">登录</button>
		<view class="text-link text-center" style="padding-top: 30px;">
			<text @click="onClickForget"><b>忘记密码？</b></text>
		</view>
		<!-- <view style="padding-bottom: 60px ;"></view>
		<view>
			<label class="radio__inner" >
				<radio style="padding-top: 10px ;" class="text-min">
					您已阅读并同意南京机房智能运维支撑平台用户《服务协议》《隐私政策》
				</radio>
			</label>
		</view> -->
		


		<!-- <button @click="onClickRegister">注册</button> -->


	</view>
</template>

<script>
	import {login} from '../../net/http';
	import {websock} from '../../net/websock';
	import store from '../../store';
	// import {Mcaptcha} from '../../utils/mcaptcha';


	export default {
		data() {
			return {
				formData: {
					mobileNum: '',
					pwd: '',
					graphCode: ''
				}
			}
		},
		async onReady() {

			// this.mcaptcha = new Mcaptcha({
			// 	el: 'canvas',
			// 	width: 160,
			// 	height: 50,
			// 	createCodeImg: ""
			// })

			try{
				if (store.token) {
					let res = await websock.ping()
					console.log('ping response', res)
					uni.switchTab({url: '/pages/dashboard/index'})
				}
			} catch (e){
				console.error(e.message)
			}
		},
		onLoad() {
			uni.$on('socketConnect', this.socketConnect)
		},
		onUnload() {
			uni.$off('socketConnect', this.socketConnect)
		},
		methods: {
			socketConnect() {
				console.log('socket connect', store)
				// if (!store.token) return
				// websock.getUserInfo(store.token, resp => {
				// 	console.log('socket connect', resp)
				// 	if (!resp || resp.code != 0) {
				// 		uni.showToast({title: resp.message})
				// 		return websock.disconnect()
				// 	}
				// 	store.userInfo = resp.data.userInfo
				// 	store.uid = store.userInfo.uid
				
				// 	uni.setStorageSync('token', store.token)
				
				// 	uni.switchTab({url: '/pages/dashboard/index'})
				// })
			},
			onClickLogin() {

				if (!this.formData.mobileNum) return uni.showToast({title: '请输入手机号码'})

				if (!this.formData.pwd) return uni.showToast({title: '请输入密码'})

				// if (!this.formData.graphCode) return uni.showToast({title: '请输入图形验证码'})

				// if (this.formData.graphCode != 'jy' && !this.mcaptcha.validate(this.formData.graphCode)) return uni.showToast({title: '图形验证码错误'})

				uni.showLoading({mask: true})

				login(this.formData.mobileNum, this.formData.pwd, 'app', res => {

					if (!res || !res.data) return uni.showToast({title: '登录出错，请检查网络连接'})
					if (res.data.code != 0) return uni.showToast({title: res.data.message})
					console.log('login res', res.data)
					store.token = res.data.data
					uni.setStorageSync('token', store.token)
					uni.switchTab({url: '/pages/dashboard/index'})
				}, () => {
					uni.showToast({title: '登录出错，请检查网络连接'})
				}, () => {
					uni.hideLoading()
				})
			},
			onClickForget() {
				uni.navigateTo({url: '/pages/login/forgetPwd'})
			},
			// updateImageCode() {
			// 	this.mcaptcha.refresh()
			// }
		}
	}
</script>

<style>
	.container {
		padding-left: 20px;
		padding-right: 20px;
		font-size: 14px;
		line-height: 24px;
		background-image: url(/static/login/bg.png);
		background-repeat: no-repeat;
		background-size: 100%;

	}

	.dian {
		width: 56px;
		height: 56px;
		padding-top: 25px;
		padding-left: 250px;
	}

	.logo {
		padding-top: 1px;
		padding-left: 20px;
		padding-bottom: 34px;
		font-size: 30px;
		color: black;
		line-height: 1.5;

	}

	.form-input {
		height: 50px;
	}

	.demo-uni-col {
		height: 36px;
		border-radius: 3px;
	}

	.text-label {
		font-size: 14px;
		font-weight: 400;
		color: #858597;
		line-height: 16px;
		padding-bottom: 2px;


	}

	.text-link {
		color: #3D7FFF;
		padding: 10px 0px 30px;
		font-size: 12px;
	}

	.text-min {
		color: #858597;
		padding: 10px 0px 30px;
		font-size: 11px;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.btn-blue {
		background-color: dodgerblue;
		color: aliceblue;

	}
</style>
